<style>
.rd-swipe {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.rd-swipe-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  box-sizing: content-box;
  white-space: nowrap;
}

.rd-swipe-item {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50%;
}

.rd-swipe-pagination {
  position: absolute;
  bottom: 30px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.banner1 .rd-swipe-pagination {
  bottom: 100px;
}

.rd-swipe-pagination-item {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 15px;
  margin: 4px;
  border-radius: 50%;
}





/* .rd-swipe-pagination-item.active {
  background: rgba(0, 0, 0, .8);
} */


/* .rd-swipe-pagination-item:hover {
  background: rgba(0, 0, 0, .3);
} */

.circleProcess {
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  stroke-dasharray: 255%;
  stroke-dashoffset: 255%;
  stroke: #e82822;
  fill: none;
  transform: rotate(-90deg);
}

.rd-swipe-pagination-item.active .circleProcess .circle {
  animation: dash 4s 1 linear;
}

.circleProcessout {
  stroke: rgba(0, 0, 0, .2);
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  stroke-dasharray: 255%;
  stroke-dashoffset: 255%;
  fill: none;
  transform: rotate(-90deg);
}

.circleProcessout .circle {
  stroke-dashoffset: 0%;
}


@keyframes dash {
  0% {
    stroke-dashoffset: 255%;
  }
  100% {
    stroke-dashoffset: 1%;
  }
}
</style>
<template>
  <div class="rd-swipe">
    <div class="rd-swipe-wrapper" :style="wrapperStyle">
      <slot></slot>
    </div>
    <div class="rd-swipe-pagination" v-if="options.pagination">
      <div class="rd-swipe-pagination-item" :class="{ 'active': item.active }" v-for="(item, index) in pagination" @click="turnTo(index)">
        <svg class="circleProcess" xmlns="http://www.w3.org/2000/svg">
          <circle class="circle" cx="50%" cy="50%" r="40%" stroke-width="8%"></circle>
        </svg>
        <svg class="circleProcessout" xmlns="http://www.w3.org/2000/svg">
          <circle class="circle" cx="50%" cy="50%" r="40%" stroke-width="8%"></circle>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
  import CovTouch from '../../assets/js/cov-touch'

  const _ = {
    on (el, type, handler) {
      el.addEventListener(type, handler, false)
    },
    off (el, type, handler) {
      el.addEventListener(type, handler, false)
    }
  }

  export default {
    props: {
      swipe: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    data () {
      return {
        $wrapper: null,
        $touch: null,
        timer: null,
        pagination: [],
        swiper: {
          swiping: false,
          rect: {
            width: 0,
            height: 0
          },
          count: 0,
          index: 0,
          options: {}
        },
        position: {
          x: 0,
          y: 0,
          z: 0
        },
        options: {
          activeIndex: 0,
          autoplay: 4000,
          pagination: true
        }
      }
    },
    computed: {
      wrapperStyle () {
        if (this.swiper.swiping) {
          return {
            transform: `translate3d(-${this.position.x}px, ${this.position.y}px, ${this.position.z}px)`,
            '-webkit-transform': `translate3d(-${this.position.x}px, ${this.position.y}px, ${this.position.z}px)`
          }
        } else {
          return {
            transform: `translate3d(-${this.position.x}px, ${this.position.y}px, ${this.position.z}px)`,
            '-webkit-transform': `translate3d(-${this.position.x}px, ${this.position.y}px, ${this.position.z}px)`,
            transition: 'all .3s',
            '-webkit-transition': 'all .3s'
          }
        }
      }
    },
    mounted () {
      _.on(window, 'resize', this.init)
      _.on(this.$el, 'resize', this.init)
      this.init()
    },
    beforeDestroy () {
      if (this.$touch) {
        this.$touch.destroy()
      }
    },
    methods: {
      init () {
        this.options = Object.assign(this.options, this.swipe)
        this.$wrapper = this.$el.getElementsByClassName('rd-swipe-wrapper')[0]
        this.swiper.count = this.$el.getElementsByClassName('rd-swipe-item').length
        this.swiper.rect = this.$el.getBoundingClientRect()

        if (this.options.pagination) {
          this.pagination = Array.from({ length: this.swiper.count }).map((item, index) => {
            return {
              index: index,
              active: index === 0
            }
          })
        }

        this.initSwipe()
        if (this.swipe.autoplay) {
          this.startAutoPlay(this.swipe.autoplay)
        }
      },
      initSwipe () {
        if (this.$touch) {
          this.$touch.destroy()
        }
        this.$touch = new CovTouch({ el: this.$el })

        this.$touch.listen('swipe-left', null, () => {
          this.swiper.swiping = false
          this.next()
        })
        this.$touch.listen('swipe-right', null, () => {
          this.swiper.swiping = false
          this.pre()
        })
        let movediff = 0

        this.$touch.listen('swiping', null, (start, end) => {
          this.swiper.swiping = true
          let move = start.x - end.x
          this.position.x += (move - movediff)
          movediff = move
        })

        this.$touch.listen('swiped', null, (start, end) => {
          movediff = 0
          this.swiper.swiping = false
        })
      },
      startAutoPlay (delay) {
        this.stopAutoPlay()
        this.timer = setInterval(this.play, delay || this.options.autoplay)
      },
      stopAutoPlay () {
        if (this.timer) {
          window.clearInterval(this.timer)
          window.clearTimeout(this.timer)
          this.timer = null
        }
      },
      play () {
        if (this.swiper.index === (this.swiper.count - 1)) {
          this.swiper.index = -1
        }
        if (this.swiper.swiping) return
        this.next()
      },
      next () {
        this.stopAutoPlay()
        this.startAutoPlay(this.swipe.autoplay)
        if (this.swiper.index < this.swiper.count - 1) {
          this.swiper.index++
        }
        this.position.x = (this.swiper.rect.width * this.swiper.index)
        this.checkOut()
      },
      pre () {
        this.stopAutoPlay()
        this.startAutoPlay(this.swipe.autoplay)
        if (this.swiper.index > 0) {
          this.swiper.index--
        }
        this.position.x = (this.swiper.rect.width * this.swiper.index)
        this.checkOut()
      },
      turnTo (index) {
        index = Math.floor(index)
        if (index < -1 || index > this.swiper.count) return console.error('invaild index: ', index)
        this.stopAutoPlay()
        this.swiper.index = index
        this.position.x = (this.swiper.rect.width * index)
        this.checkOut()
        this.startAutoPlay()
        // this.timer = setTimeout(() => {
        //   this.startAutoPlay()
        // }, this.swipe.autoplay)
      },
      setPaginationActive (index) {
        this.pagination.forEach((item) => {
          item.active = false
        })
        this.pagination[index].active = true
      },
      checkOut () {
        this.swipe.activeIndex = this.swiper.index
        if (this.options.pagination) {
          this.setPaginationActive(this.swiper.index)
        }
        if (this.position.x > (this.swiper.rect.width * this.swiper.count)) {
          this.position.x = (this.swiper.rect.width * this.swiper.count)
        }
        if (this.position.x < 0) {
          this.position.x = 0
        }
      }
    }
  }
</script>
